<!-- 用户管理 -->
<template>
  <!--用户管理-->
  <div class="content_b" v-loading.block="loading">
    <!--Search start-->
    <div class="search-form" v-on:keypress.enter="search">
      <el-form :model="userSearch" :inline="true" class="demo-form-inline">
        <el-form-item label="用户姓名">
          <el-input v-model="userSearch.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userSearch.phone"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="userSearch.account"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userSearch.nickName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain style="padding-left: 40px; padding-right: 40px" @click="search">查询</el-button>
          <el-button type="primary" plain @click="addUser">添加用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--Search end-->

    <!---table content Start-->
    <el-table :data="list" :header-cell-style="{ background: '#e8e8e8' }" style="width: 100%; margin: 20px 0">

      <el-table-column fixed prop="index" width="80" :show-overflow-tooltip="true" type="index"></el-table-column>
      <el-table-column prop="name" label="用户名称" width="110" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column prop="nickName" label="别名" width="150" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column prop="phone" label="用户电话" width="150" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column prop="email" label="Email" width="150" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column prop="account" label="登录账户" width="150" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column prop="remark" width="160" label="备注"></el-table-column>
      <el-table-column prop="isRoot" label="是否根账户" width='120' showOverflowTooltip='true'>
        <template #default="scope">
          <span>{{ scope.row.isRoot == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150" :show-overflow-tooltip="true">
        <template #default="scope">
          {{ dateUtil.formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="updateUserName" label="更新人"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="150" :show-overflow-tooltip="true">
        <template #default="scope">
          {{ dateUtil.formatDateTime(scope.row.updateTime) }}
        </template></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-tooltip content="编辑" effect="dark">
            <el-button @click="edit(scope.row)" type="text">
              <el-icon :size="20">
                <iconify icon="material-symbols:edit-square-outline"></iconify>
              </el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" effect="dark">
            <el-button @click="remove(scope.row)" type="text">
              <el-icon :size="22">
                <iconify icon="material-symbols-light:delete-outline"></iconify>
              </el-icon>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination class="pagination_customer" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.pageNum" :page-sizes="[10, 20, 50, 100, 500]" :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>

    <!---table content end-->

    <el-drawer v-model="showDrawer" size="89%" @close="closeDrawer" destroy-on-close>
      <user-edit :user="userEditModel" :isEdit='isEdit' @closeDrawer="closeDrawer"></user-edit>
    </el-drawer>
  </div>
</template>

<style lang='scss' scoped></style>
<script>
import dateUtil from '@/utils/dateUtil.js'
import {
  ElMessage, ElMessageBox
} from 'element-plus'
import { getUserList, removeUser } from '@/api/user.js';
import userEdit from './components/editUser.vue';
const editObj = { id: 0, name: '', code: '', phone: '', nickName: '', email: '', account: '', remark: '', userPrimaryKey: '', positionKeys: [] }

export default {
  components: { userEdit },
  data() {
    return {
      userSearch: {
        name: '',
        account: '',
        nickName: '',
        phone: '',
        code: '',
        currentPage: 1,
        pageSize: 10
      },
      loading:false,
      dateUtil,
      list: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      showDrawer: false,
      isEdit: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    async search() {
      this.loading = true
      let userSearch = this.userSearch
      let page = this.page
      let searchForm = {
        nameFuzzy: userSearch.name,
        accountFuzzy: userSearch.account,
        nickNameFuzzy: userSearch.nickName,
        code: userSearch.code,
        phoneFuzzy: userSearch.phone,
        currentPage: page.pageNum,
        pageSize: page.pageSize
      }
      let res = await getUserList(searchForm)
      let resp = res.data
      if (resp && resp.success == false) {
        ElMessage.error(`${resp.message}`)
        this.loading = false
        return
      }
      this.list = resp.rows;
      page.total = resp.total;
      //this.getPositionInfoInUserList()
      this.loading = false
    },
    getPositionInfoInUserList() {
      if (this.list.length > 0) {
        this.list.forEach(v => {
          v.positionKeys = []
          v.positions.forEach(item => {
            if (v.positionName) {
              v.positionName += ';' + item.name
              v.positionKey += ';' + item.positionPrimaryKey
            } else {
              v.positionName = item.name
              v.positionKey = item.positionPrimaryKey
            }
            v.positionKeys.push(item.positionPrimaryKey);
          })
        })
      }
    },
    addUser() {
      this.isEdit = false
      this.userEditModel = JSON.parse(JSON.stringify(editObj))
      this.showDrawer = true;
    },
    handleSizeChange(size) {
      if (size == null) { return; }
      this.page.pageSize = size
      this.search();
    },
    handleCurrentChange(num) {
      if (num == null) { return; }
      this.page.pageNum = num
      this.search();
    },
    edit(row) {
      this.isEdit = true
      let cloneObj = JSON.parse(JSON.stringify(editObj))
      for (var key in cloneObj) {
        cloneObj[key] = row[key] || cloneObj[key]
      }
      this.userEditModel = cloneObj
      this.showDrawer = true
    },
    async remove(data) {
      ElMessageBox.confirm('是否删除当前用户：' + data.name + '?', '删除提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消'
      }).then(async () => {
        let res = await removeUser({ userPrimaryKeys: [data.userPrimaryKey] })
        let resp = res.data
        if (resp && resp.success == true) {
          ElMessage.success("删除成功！");
          this.search();
        }
      }).catch(action => {
        ElMessage.error('已取消删除');
      })
    },
    closeDrawer() {
      this.search()
      this.showDrawer = false;
    },
  },
  created() {
    this.search()
  },
  mounted() {

  },
}
</script>